import { useMaterialDrop } from "@/pages/lowCodeEditorPlus/hooks/useMaterialDrop";
import React, { FC, ReactNode, useMemo } from "react";
import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { accept } from "./setter";
import HoverMask from "@/pages/lowCodeEditorPlus/components/EditArea/HoverMask";
interface TableOperationColumnType {
  id: string;
  className?: string;
  children: ReactNode;
  index: number;
  size: "large" | "middle" | "small";
}
const TableOperationColumn = ({ id, className, children, index, size }: TableOperationColumnType) => {
  const { canDrop, drop } = useMaterialDrop(accept?.buttonGroup||[], id, "buttonGroup");
  const otherProps = {
    ...(index === 0 && { "data-component-unit-type": "buttonGroup" }),
  };

  const columnClass = useMemo(() => {
    const obj = {
      large: "-m-3 p-3",
      middle: "-my-2 -mx-2 p-2",
      small: "-m-1 p-1",
    };
    return obj[size as "large" | "middle" | "small"];
  }, [size]);
  return (
    <div className={`${columnClass} bg-white border-blue-500 leading-4`} ref={drop} data-component-id={id} {...otherProps}>
      {children}
      {id && canDrop && (
        <HoverMask portalWrapperClassName="portal-wrapper" containerClassName="edit-area" componentId={id} />
      )}
    </div>
  );
};

export default TableOperationColumn;
